<template>
    <div class="invitation-record-page">
        <back title="我的邀请记录"></back>
        <div class="invitation-record-content">
            <div class="record-list" v-if="InviteList">
                <nodata v-if="InviteList.inviteList.length < 1" title="暂无邀请记录"></nodata>
                <div v-else class="item" v-for="(item,index) in InviteList.inviteList" :key="index">
                    <span class="avatar"><i class="iconfont icon-morentouxiang"></i></span>
                    <div class="right">
                        <div class="nickname">{{item.name}}</div>
                        <div class="time">{{item.phone}}</div>
                        <div class="level">{{level(item)}}<span>总收入{{item.total_money || '0.00'}}RMB</span></div>
                        <div class="money">{{item.create_time}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="stylus">
.invitation-record-page{
    padding-top 50px
    .invitation-record-content{
        height 100%
        font-size 14px
        overflow-y auto
        .record-list{
            padding 10px
            .item{
                display flex
                align-items center
                padding 10px 0
                border-bottom 1px solid #efefef
                .avatar{
                    width 50px
                    height 50px
                    border-radius 50%
                    // background #ccc
                    margin-right 10px
                    i{
                        font-size 50px
                        color #ddd
                    }
                }
                .right{
                    flex 1
                    position relative
                    height 100%
                    .nickname{
                        margin-bottom 10px
                        color #000
                    }
                    .time{
                        font-size 12px
                        color #666
                        
                    }
                    .level{
                        position absolute
                        top 0px
                        right 10px
                        font-size 12px
                        color #0031ff
                        span{
                            color #ff004d
                        }
                    }
                    .money{
                        position absolute
                        bottom 0px
                        right 10px
                        font-size 12px
                        span{
                            color #e69302
                        }
                    }
                }
            }
        }
    }
}
</style>

<script>
export default {
    data(){
        return {
            InviteList:''
        }
    },
    created(){
        this.getInviteList();
    },
    methods:{
        level(item){
            switch(item.level){
                case 'level_1':
                    return '一级代理'
                break;
                case 'level_2':
                    return '二级代理'
                break;
                case 'level_3':
                    return '三级代理'
                break;
            }
        },
        getInviteList(){
            this.$http.post(`/Invite/getInviteList`,{
                page:1
            }).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.InviteList = res.data
                }   
            })
        }
    }
}
</script>
